<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业动态</title>
    <link rel="stylesheet" type="text/css"
          href="../bootstrap/bootstrap.4.1.0.css">
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
    <script src="../bootstrap/popper.12.5.min.js"></script>
    <script src="../bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="../layui/layer/layer.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
</head>
<body>
    <div id="app" class="container">
        <form>
           <div class="form-group">
               <label for="sel1">作业类型:</label>
               <select class="form-control" id="sel1" v-model="homeworkType">
                   <option value="1">当天作业</option>
                   <option value="2">周末作业</option>
                   <option value="3">寒暑假作业</option>
               </select>
           </div>
            <div class="form-group">
                <label for="sel2">科目:</label>
                <select class="form-control" id="sel2" v-model="homeworkSubject">
                    <option value="1">语文</option>
                    <option value="2">数学</option>
                    <option value="3">外语</option>
                    <option value="4">物理</option>
                    <option value="5">化学</option>
                    <option value="6">生物</option>
                    <option value="7">政治</option>
                    <option value="8">历史</option>
                    <option value="9">地理</option>
                    <option value="10">文综</option>
                    <option value="11">理综</option>
                </select>
            </div>
        </form>
        <button class="btn-outline-info"  @click="query">查询</button>
    <br>
    <br>
        <div v-if="papers!=null">
            <table class="table table-striped table-hover text-center">
                <thead>
                <tr>
                    <th>序号1</th>
                    <th>作业名称</th>
                    <th>时间</th>
                    <th>科目</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(paper,index) in papers" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{paper.paperName}}</td>
                    <td>{{paper.paperBirth}}</td>
                    <td>{{paper.paperSubject}}</td>
                    <td v-if="paper.expired"><button type="button" class="btn btn-primary"
                                                       @click=viewPaper(paper.paperId)>查看详情</button></td>
                    <td v-else>
                        <button type="button" class="btn btn-primary"
                                @click=doPaper(paper.paperId)>做作业</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="row">
                <div class="offset-md-5">
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="#"
                                                 @click.prevent="prePage"> <</a></li>
                        <li class="page-item" v-for="(item, index) in pageNum"><a
                                class="page-link" href="#" @click.prevent="getPage(item)"
                                :class="{active: currentPage==index+1}">{{ index+1 }}</a></li>
                        <li class="page-item"><a class="page-link" href="#"
                                                 @click.prevent="nextPage">></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div v-else class="row">
            <p class="offset-md-5">您没有作业额QAQ</p>
        </div>
    </div>

<script>
    new Vue({
        el:"#app",
        data:{
            homeworkType:"1",
            homeworkSubject:"1",
            page:"1",
            papers:[],
            pageNum:0,
            currentPage:0,
        },
        mounted(){
            this.query();
        },
        methods:{
            query:function () {
                this.getPage(1);
                console.info(this.homeworkType+":"+this.homeworkSubject+";");
            },
            getPage:function (page) {
                axios.get("../task/getPapers"+"/"+this.homeworkType+"/"+this.homeworkSubject+"/"+page).then(
                    res => {
                        if(res.data.code==200){
                            this.papers = res.data.data.list;
                            this.currentPage = res.data.data.nowPage;
                            this.pageNum = res.data.data.totalPage;
                        }
                    }
                )

            },
            viewPaper:function (id){
                layer.alert("查看作业详情："+id);
                location.href = "./view_homework.html?paperid="+id;
            },
            doPaper:function (id){
                location.href = "do_homework.html?paperid="+id+"&first=1";
            },
            prePage:function(){
                if(this.currentPage>1){
                    this.getUnread(this.currentPage-1);
                }
            },
            nextPage:function(){
                if(this.currentPage<this.pageNum){
                    this.getUnread(this.currentPage+1);
                }
            },
        }
    })
</script>
</body>
</html>